﻿<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>充值</title>
	<link rel="stylesheet" href="./css/weui.min.css" />
	<link rel="stylesheet" href="./fonts/iconfont.css" />
	<link rel="stylesheet" href="css/style.css" />
	<script src="js/jquery-2.2.3.min.js"></script>
	<script src="js/weui.min.js"></script>
</head>

<body ontouchstart>
	<div class='weui-conetent'>
		<div class='weui-content-padded'>选择充值金额</div>
		<div class="cznumber">
			<ul class="clearlist clearfix">
				<li>
					<input type="radio" name="num" id="n50" value="50" checked><label for="n50">50元</label>
				</li>
				<li>
					<input type="radio" name="num" id="n100" value="100"><label for="n100">100元</label>
				</li>
				<li>
					<input type="radio" name="num" id="n200" value="200"><label for="n200">200元</label>
				</li>
				<li>
					<input type="radio" name="num" id="n500" value="500"><label for="n500">500元</label>
				</li>
				<li>
					<input type="radio" name="num" id="n1000" value="1000"><label for="n1000">1000元</label>
				</li>
			</ul>
		</div>

		<div class='weui-content-padded'>其他充值金额</div>

		<div class='weui-content-padded'>
			<div class='weui-cells'>
				<div class='weui-cell outline'>
					<div class='weui-cell__bd'>
						<input type='number' pattern="[0-9]*"  class="weui-input Input-amount writeMoney">
					</div>
				</div>
			</div>

		</div>

		<div class='weui-content-padded'>
			<div>实际到账：<span class="color-red moneys">&yen;50</span></div>
			<div class="mt20"><input type='button' class="weui-btn weui-btn_primary" id="submitBtn" value="确认"></div>
		</div>
		<div class="tips"></div>
	</div>
</body>
<script src="./api.js"></script>
<script>
	window.onload = function () {
		//输入框初始值
		let actualAccount = '¥50'
		$('.writeMoney').attr('value', 50)

		//当选中的时候
		$("input[type=radio]").click(function () {
			let moneynum = this.value
			$('.moneys').html('¥' + moneynum)
			$('.writeMoney').attr('value', moneynum)
		})

		//当输入框获取焦点的时候
		$('.writeMoney').focus(function () {
			$('.writeMoney').attr('value', '')
			$("input[type=radio]").removeAttr("checked")

			$('.writeMoney').val() == '' ? $('.moneys').html('¥0') : $('.moneys').html('¥' + $('.writeMoney').val())

			//当输入框发生键盘事件
			$(".writeMoney").keyup(function (event) {
				$('.writeMoney').val() == '' ? $('.moneys').html('¥0') : $('.moneys').html('¥' + event.target.value)

			})
			$("input[type=radio]").click(function () {
				let moneynum = this.value
				$('.moneys').html('¥' + moneynum)
				$('.writeMoney').attr('value', moneynum)
			})
		})

		$('.writeMoney').blur(function () {
			if ($('.writeMoney').val() != '') {
				$('.moneys').html('¥' + event.target.value)
				$("input[type=radio]").removeAttr("checked")
			}
		})

	}




	let userinfo = JSON.parse(localStorage.getItem('wxUserInfo')).data
	let customerID = userinfo.customer.customerID
	let token = userinfo.token
	let api = getApi()

	$('#submitBtn').on('click', function(){
		let checkedMoney = $('.moneys').text()
		let money = checkedMoney.split('¥')[1];
		let params = {
			"trade_type": "1",
			"orderno": "",
			"customerID": customerID,
			"body": "微信公众号充值",
			"total_fee": money,
			"product_id": "",
			"total_fee_type": "1"
		}

		fetch(`${api}/unifiedorder`, {
			method: "post",
			headers: {
				'Content-type': 'application/json',
				"Authorization": token
			},
			body: JSON.stringify(params)
		})
			.then(res => res.json())
			.then(payParams => {
				let appId = payParams.appId
				let timeStamp = payParams.timeStamp
				let nonceStr = payParams.nonceStr
				let package = payParams.package
				let signType = payParams.signType
				let paySign = payParams.paySign
				// console.log(appId,timeStamp,nonceStr,package,signType,paySign)
				function onBridgeReady() {
					console.log(appId, timeStamp, nonceStr, package, signType, paySign)
					WeixinJSBridge.invoke(
						'getBrandWCPayRequest', {
							"appId": appId,//公众号名称，由商户传入     
							"timeStamp": timeStamp,//时间戳，自1970年以来的秒数     
							"nonceStr": nonceStr,//随机串     
							"package": package,
							"signType": signType,//微信签名方式：     
							"paySign": paySign //微信签名 
						},
						function (res) {
							$('.tips').html(res)
							if (res.err_msg == "get_brand_wcpay_request:ok") {
								// 使用以上方式判断前端返回,微信团队郑重提示：
								//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
								location.href = './zhanghu.html';
							} else {
								alert('支付失败')
							}
						});
				}
				if (typeof WeixinJSBridge == "undefined") {
					if (document.addEventListener) {
						document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
					} else if (document.attachEvent) {
						document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
						document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
					}
				} else {
					onBridgeReady();
				}
			})
			.catch(err => {
				console.log(err)
			})
	})
</script>

</html>